<template>
    <el-dropdown v-bind="dropdownProps" @click="handleClick"
                 @command="handleCommand">
        <span><custom-button :options="btnOptions" /></span>
        <el-dropdown-menu slot="dropdown">
            <template v-for="(item, index) in dropdownItemList">
                <custom :key="index" name="ElDropdownItem" :attributes="item">{{ item.label }}</custom>
            </template>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import { ElDropdown } from "../attributes";

export default {
    name: "PrintDropdownBtn",
    props: {
        type: {
            type: String,
            default: null,
        },
        btnOptions: {
            type: Object,
            default: null,
        },
        options: {
            type: Object,
            default: null,
        },
        disabled: {
            type: Boolean,
            default: null,
        },
        dropdownItem: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    components: {
        Custom: () => import("../index"),
        CustomButton: () => import("../Button"),
    },
    data() {
        return {
            defaultProps: {
                ...ElDropdown
            },
            designList: [],
            dropdownItemList: [],
        };
    },
    computed: {
        dropdownProps() {
            let props = $.extend({}, this.defaultProps);
            if (this.options) {
                for (let field in this.defaultProps) {
                    if (typeof this.options[field] !== 'undefined') {
                        props[field] = this.options[field];
                    }
                    let propsFn = this.options[`${ field }Fn`];
                    if (typeof propsFn === 'function') {
                        props[field] = propsFn.call(this.options, this.row);
                    }
                }
            } else {
                props.placement = 'bottom-start';
            }
            if (this.disabled) {
                props.disabled = this.disabled;
            }
            return props;
        },
    },
    mounted() {
        this.initPrintDesignList();
    },
    methods: {
        initPrintDesignList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindBasePrintDesigns, {
                type: _this.type,
                state: 1,
                nopage: '1',
            }).then(result => {
                _this.designList = result.data || [];
                let list = _this.designList.map(item => {
                    return {
                        command: item.sid,
                        label: item.name,
                    };
                });
                if (_this.$utils.isNotEmptyList(_this.dropdownItem)) {
                    list = list.concat(_this.dropdownItem);
                }
                _this.dropdownItemList = list;
            }).catch(() => {
            });
        },
        handleClick() {
            this.$emit('click');
        },
        handleCommand(command) {
            const _this = this;
            let filter = _this.designList.filter(item => item.sid === command);
            if (_this.$utils.isNotEmptyList(filter)) {
                this.$emit('command', filter[0]);
                return;
            }
            this.$emit('command', command);
        },
    },
}
</script>

<style scoped>

</style>